<script setup>
/* Add the tinymce-vue wrapper to the bundle */
import Editor from '@tinymce/tinymce-vue';
/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
/* Import TinyMCE */
import tinymce from 'tinymce';

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import 'tinymce/plugins/image';
import 'tinymce/plugins/importcss';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/save';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/table';
import 'tinymce/plugins/template';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';

/* Import premium plugins */
/* NOTE: Download separately and add these to /src/plugins */
/* import './plugins/checklist/plugin'; */
/* import './plugins/powerpaste/plugin'; */
/* import './plugins/powerpaste/js/wordimport'; */

(function (cloudSettings) {
  tinymce.overrideDefaults(cloudSettings);
})({
  "api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "autocorrect_service_url": "/spelling",
  "content_css_cors": true,
  "custom_plugin_urls": {},
  "editimage_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "editimage_proxy_service_url": "/imageproxy",
  "export_image_proxy_service_url": "/imageproxy",
  "linkchecker_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "linkchecker_service_url": "/hyperlinking",
  "mediaembed_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "mediaembed_service_url": "/hyperlinking",
  "promotion": false,
  "referrer_policy": "origin",
  "rtc_service_url": "/rtc",
  "rtc_tenant_id": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "spellchecker_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "spellchecker_rpc_url": "/spelling",
  "suffix": ".min",
  "tinydrive_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
  "tinydrive_service_url": "/catalog",
  "tinydrive_token_provider": (success, failure) => {
    success({token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo"});
  },
  "tinydrive_demo_files_url": "../_images/tiny-drive-demo/demo_files.json",
});
tinymce.baseURL = "static/js"

</script>

<template>
  <main id="sample">
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
    <Editor
        :init="{
        plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed template codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap mentions quickbars linkchecker emoticons advtable export footnotes mergetags autocorrect',
        toolbar: 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment | footnotes | mergetags',
        language : 'zh_CN',
        skin: false,
        content_css: false,
        branding: false
      }"
    />
  </main>
</template>

<style scoped>
.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 1000px;
  }
}
</style>
